import Dom from '../utils/Dom';
import utils from '../utils/index';
import Utils from '../utils/index';

class Loading {
    constructor(parent, options) {
        this.parent = parent || document.body;
        this.options = Utils.extend({
            text: '数据加载中 ...',
            icon: ''
        }, options);

        this.loading = Dom.append(this.parent, 'div', 'loading');

        this.loadingContent = Dom.append(this.loading, 'div', 'loading-content');

        // 从 loading.io 上下载
        Dom.append(this.loadingContent, 'div', 'icon', /*'<svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg>'*/
            `<svg class="lds-spinner" width="100px"  height="100px"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="rotate(0 50 50)">
            <rect x="48.5" y="25" rx="9.7" ry="5" width="3" height="10" fill="#006cee">
              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.7s" begin="-0.6416666666666666s" repeatCount="indefinite"></animate>
            </rect>
          </g><g transform="rotate(30 50 50)">
            <rect x="48.5" y="25" rx="9.7" ry="5" width="3" height="10" fill="#006cee">
              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.7s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
            </rect>
          </g><g transform="rotate(60 50 50)">
            <rect x="48.5" y="25" rx="9.7" ry="5" width="3" height="10" fill="#006cee">
              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.7s" begin="-0.525s" repeatCount="indefinite"></animate>
            </rect>
          </g><g transform="rotate(90 50 50)">
            <rect x="48.5" y="25" rx="9.7" ry="5" width="3" height="10" fill="#006cee">
              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.7s" begin="-0.4666666666666666s" repeatCount="indefinite"></animate>
            </rect>
          </g><g transform="rotate(120 50 50)">
            <rect x="48.5" y="25" rx="9.7" ry="5" width="3" height="10" fill="#006cee">
              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.7s" begin="-0.40833333333333327s" repeatCount="indefinite"></animate>
            </rect>
          </g><g transform="rotate(150 50 50)">
            <rect x="48.5" y="25" rx="9.7" ry="5" width="3" height="10" fill="#006cee">
              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.7s" begin="-0.3499999999999999s" repeatCount="indefinite"></animate>
            </rect>
          </g><g transform="rotate(180 50 50)">
            <rect x="48.5" y="25" rx="9.7" ry="5" width="3" height="10" fill="#006cee">
              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.7s" begin="-0.2916666666666667s" repeatCount="indefinite"></animate>
            </rect>
          </g><g transform="rotate(210 50 50)">
            <rect x="48.5" y="25" rx="9.7" ry="5" width="3" height="10" fill="#006cee">
              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.7s" begin="-0.2333333333333333s" repeatCount="indefinite"></animate>
            </rect>
          </g><g transform="rotate(240 50 50)">
            <rect x="48.5" y="25" rx="9.7" ry="5" width="3" height="10" fill="#006cee">
              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.7s" begin="-0.17499999999999996s" repeatCount="indefinite"></animate>
            </rect>
          </g><g transform="rotate(270 50 50)">
            <rect x="48.5" y="25" rx="9.7" ry="5" width="3" height="10" fill="#006cee">
              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.7s" begin="-0.11666666666666665s" repeatCount="indefinite"></animate>
            </rect>
          </g><g transform="rotate(300 50 50)">
            <rect x="48.5" y="25" rx="9.7" ry="5" width="3" height="10" fill="#006cee">
              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.7s" begin="-0.05833333333333333s" repeatCount="indefinite"></animate>
            </rect>
          </g><g transform="rotate(330 50 50)">
            <rect x="48.5" y="25" rx="9.7" ry="5" width="3" height="10" fill="#006cee">
              <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.7s" begin="0s" repeatCount="indefinite"></animate>
            </rect>
          </g></svg>`
        );

        this.text = Dom.append(this.loadingContent, 'p', null, this.options.text);
    }

    show(text) {
        if (text) {
            this.text.innerText = text;
        }
        this.loading.style.display = 'block';
    }

    hide() {
        this.loading.style.display = 'none';
    }

    destory() {

    }


}

export default Loading;